<template>
	<view class="content">
		<!-- <scroll-view scroll-y class="detial-main"> -->
		<view>
			<swiper class="detail-swiper" indicator-dots="true" autoplay="true" interval="10000" duration="1000" circular="true">
				<swiper-item>
					<view class="swiper-item">
						<image src="../../static/res-temp/images/u97.jpg" mode=""></image>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item">
						<image src="../../static/res-temp/images/u97.jpg" mode=""></image>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item">
						<image src="../../static/res-temp/images/u97.jpg" mode=""></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="detail-base">
			<view class="detail-base-title">培训教育系统</view>
			<view class="detail-base-price">
				<view class="detail-base-preferential-price">999999.00</view>
				<view class="detail-base-original-price">¥1999999.00</view>
			</view>
			<view class="detail-base-data">
				<view class="detail-base-data-3">
					折扣：无折扣
				</view>
				<view class="detail-base-data-3">
					0人评价
				</view>
				<view class="detail-base-data-3">
					0人购买
				</view>
			</view>
		</view>
		<view class="detail-base-use-score">
			<view class="detail-base-use-score-icon">
				惠
			</view>
			<view class="detail-base-use-score-text">
				本商品可以使用0积分
			</view>
		</view>
		<view class="uni-list">
			<view class="uni-list-cell" hover-class="detail-cell-hover-no">
				<view class="uni-list-cell-navigate">
					售卖数量
				</view>
			</view>
			<view class="uni-list-cell" hover-class="detail-cell-hover-no">
				<view class="uni-list-cell-navigate">
					<uni-number-box class="detail-number-box" :min="1" :max="99999" :step="1" :value="1"></uni-number-box>
				</view>
			</view>
			<view class="uni-list-cell" hover-class="detail-cell-hover-no">
				<view class="uni-list-cell-navigate">
					选择
				</view>
			</view>
		</view>
		<view class="detail-richtext-title">------ 详情 ------</view>
		<view class="detail-richtext-content">
			<rich-text :nodes="richtext">

			</rich-text>
			<view class="detail-richtext-space"></view>
		</view>
		<!-- </scroll-view> -->

		<view class="detail-footer-nav">
			<view class="detail-footer-other">
				<view class="detail-footer-other-icon anyidc anyidc-shouye1"></view>
				<view class="detail-footer-other-text">
					首页
				</view>
			</view>
			<view class="detail-footer-other">
				<view class="detail-footer-other-icon anyidc anyidc-shoucang"></view>
				<view class="detail-footer-other-text">
					收藏
				</view>
			</view>
			<view class="detail-footer-main">
				放入购物车
			</view>
			<view class="detail-footer-main detail-footer-buy">
				立即购买
			</view>
		</view>
	</view>
</template>

<script>
	import uniIcon from "@/components/uni-icon.vue";
	import uniNumberBox from '@/components/uni-number-box.vue'
	export default {
		data() {
			return {
				richtext: '<p><img src="http://www.anyidc.com/includes/ueditor/php/../../../images/image/43211538193169.png" title="1.png" width="1000" height="568" border="0" hspace="0" vspace="0" style="width: 100%; height: 568px;"></p><p><img src="http://www.anyidc.com/includes/ueditor/php/../../../images/image/61611538193169.png" style="width: 100%; height: 633px;" title="2.png" width="1000" height="633" border="0" hspace="0" vspace="0"></p><p><img src="http://www.anyidc.com/includes/ueditor/php/../../../images/image/59301538193169.png" style="width: 100%; height: 617px;" title="3.png" width="1000" height="617" border="0" hspace="0" vspace="0"></p><p><img src="http://www.anyidc.com/includes/ueditor/php/../../../bdimages/upload1/20180929/1538193604765363.png" title="易校通-后台.png" width="1000" height="526" border="0" hspace="0" vspace="0" style="width: 100%; height: 526px;"></p><p><br></p>'
			};
		},
		components: {
			uniIcon,
			uniNumberBox
		}
	}
</script>

<style>
	.detail-swiper,
	.detail-swiper swiper-item,
	.detail-swiper swiper-item image {
		width: 750upx;
		height: 750upx;
	}

	.detail-footer-nav {
		position: fixed;
		height: 100upx;
		background: #fff;
		bottom: 0;
		width: 750upx;
		border-top: 1upx solid #ddd;
		z-index: 999;
	}


	.detail-footer-other {
		width: 120upx;
		float: left;
		height: 100upx;
		position: relative;
	}

	.detail-footer-other:nth-child(2):before {
		content: '';
		display: block;
		height: 100%;
		width: 1px;
		position: absolute;
		top: 0;
		left: 0;
		background: #ddd;
		transform: scaleX(.5);
	}

	.detail-footer-other-icon {
		height: 60upx;
		line-height: 68upx;
		font-size: 38upx;
		text-align: center;
		color: #686868;
	}

	.detail-footer-other-text {
		height: 40upx;
		text-align: center;
		line-height: 40upx;
		font-size: 24upx;
		color: #686868;
	}

	.detail-footer-main {
		line-height: 100upx;
		text-align: center;
		color: #fff;
		font-size: 30upx;
		width: calc((750upx - 240upx) / 2);
		float: left;
		height: 100upx;
		background: #f09e45;
	}

	.detail-footer-buy {
		background: #ca3a34;
	}

	.detial-main {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		//#ifdef H5
		bottom: 10upx;
		//#endif
		//#ifdef MP-WEIXIN	
		bottom: 100upx;
		//#endif
	}

	.detail-base {
		background: #fff;
		height: 180upx;
		box-sizing: border-box;
		padding: 20upx;

	}

	.detail-base-title {
		height: 50upx;
		font-size: 28upx;
		line-height: 50upx;
		color: #333;
	}

	.detail-base-price {
		height: 60upx;
		line-height: 60upx;
		overflow: hidden;

	}

	.detail-base-preferential-price {
		color: #f00;
		font-size: 37upx;
		float: left;
	}

	.detail-base-preferential-price:before {
		content: '¥';
		font-size: 28upx;
		padding-right: 3upx;
	}

	.detail-base-original-price {
		float: left;
		text-decoration: line-through;
		font-size: 25upx;
		padding-left: 10upx;
		color: #aaa;
		line-height: 70upx;
	}

	.detail-base-data {
		height: 50upx;
		line-height: 50upx;
		font-size: 24upx;
	}

	.detail-base-data-3 {
		float: left;
		width: 33.3333%;
		color: #999;
	}

	.detail-base-data-3:nth-child(2) {
		text-align: center;
	}

	.detail-base-data-3:nth-child(3) {
		text-align: right;
	}

	.detail-base-use-score {
		height: 80upx;
		background: #f2f2f2;
		padding: 0 20upx;
	}

	.detail-base-use-score-icon {
		height: 40upx;
		margin: 20upx;
		float: left;
		background: #c92923;
		width: 40upx;
		border-radius: 40upx;
		line-height: 40upx;
		color: #fff;
		text-align: center;
		font-size: 26upx;
	}

	.detail-base-use-score-text {
		font-size: 28upx;
		color: #828282;
		line-height: 80upx;
	}

	.detail-number-box /deep/ .uni-numbox-minus,
	.detail-number-box /deep/ .uni-numbox-plus {
		border-radius: 0;
	}

	.uni-numbox-minus,
	.uni-numbox-plus {
		border-radius: 0;
	}

	.detail-cell-hover-no {}

	.detail-richtext-title {
		height: 80upx;
		background: #f4f4f4;
		line-height: 80upx;
		text-align: center;
		font-size: 25upx;
		color: #a6a6a6;
	}

	.detail-richtext-space {
		height: 100upx;
	}
</style>
